import React, {Component} from 'react';
import { NavLink } from 'react-router-dom';
import { Layout, Menu, Dropdown,Avatar, Badge} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { DashboardOutlined,UnorderedListOutlined,SettingOutlined } from '@ant-design/icons';
import {connect} from 'react-redux';

import { adminRourts } from "../../router";
//导入样式
import logo from '@/assects/images/logo.png';
import { DivWrapper } from './style';
import './style.css';

const { Header, Content, Sider } = Layout;
const menus = adminRourts.filter(route => route.isNav===true);


class Frame extends Component {
    constructor(props){
        super(props);

        this.informationCounts = this.props.notifications.list.filter(item => item.hasRead === false).length
        this.state = {
            pathname: menus[0].pathname,
            isPath: true,
           
        }
    }

    dropDownMenuClick = ({key}) => {
        // console.log(key);
        // console.log(this.props.children._owner.pendingProps.history);
        console.log(key);
        this.props.children._owner.pendingProps.history.push(key);
    }


    renderDropDown =() =>(
        <Menu onClick={this.dropDownMenuClick}>
          <Menu.Item key="/admin/notifications">
            <Badge dot={Boolean(this.informationCounts)} offset={[20,7]}>
                通知中心
            </Badge>
          </Menu.Item>
          <Menu.Item key="/admin/profile">
              个人设置
          </Menu.Item>
          <Menu.Item key="/login">
              退出登录
          </Menu.Item>
        </Menu>
      );

    componentDidMount(){
        // console.log(this.props.children._owner.pendingProps.location.pathname);
        const currentPathName = this.props.children._owner.pendingProps.location.pathname;
        // console.log(currentPathName);
        this.setState({
            pathname: currentPathName,
        })
        // console.log(this.props.notifications.list);   //确定redux绑定成功
        // console.log(this.informationCounts);
        // console.log(this.state.pathname);
        // console.log('页面被重新渲染了');
    }


    componentDidUpdate(){
        const currentPathName = this.props.children._owner.pendingProps.location.pathname;
        // console.log(currentPathName);
        //    /admin/article/edit:54000019810622278X
        if(currentPathName !== this.state.pathname)
        {
            this.setState({
                pathname: currentPathName
            })
        }
        // console.log(this.state.pathname);
        // console.log('页面发生了更新');
     }
    

    render() {
        // console.log(this.props)
        const {pathname} = this.state;
        const pathNameArr = pathname.split('/');
        pathNameArr.length = 3;    //改变length

        // console.log(pathNameArr);
        return (
            <Layout>
                <Header className="header YTheader" >
                    <DivWrapper className="logo">
                        <img src={logo} alt="logo"/>
                    </DivWrapper>
                    <div>
                    <Dropdown overlay={this.renderDropDown} trigger={['click']} className="dropDown">
                        <Badge count={this.informationCounts} offset={[-9,7]}>
                            <div  onClick={e => e.preventDefault()} style={{display:'flex',alignItems:'center'}}>
                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                <span>Hello! Young </span>
                                <DownOutlined />
                            </div>
                        </Badge>
                    </Dropdown>
                    </div>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={[pathNameArr.join('/')]}
                            // defaultSelectedKeys={[pathName]}
                            selectedKeys={[pathNameArr.join('/')]}   
                            style={{ height: '100%', borderRight: 10 }}

                        >
                            <Menu.Item
                                key={menus[0].pathname}
                                icon={<DashboardOutlined/>}>
                                <NavLink to="/admin/dashboard" exact>{menus[0].title}</NavLink>
                            </Menu.Item>
                            <Menu.Item
                                key={menus[1].pathname}
                                icon={<UnorderedListOutlined/>}>
                                <NavLink to="/admin/article" exact>{menus[1].title}</NavLink>
                            </Menu.Item>
                            <Menu.Item
                                key={menus[2].pathname}
                                icon={<SettingOutlined/>}>
                                <NavLink to="/admin/settings" exact>{menus[2].title}</NavLink>
                            </Menu.Item>

                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 0px 24px' }}>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 10,
                                margin: 0,
                                minHeight: 800
                            }}
                        >
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        );
    }


}

// export default Frame;

const mapStateToProps = state => ({
    notifications: state.notifications
  })
  
//   const mapDispatchToProps = dispatch => (
      
//   )
  
//   export default connect(mapStateToProps, mapDispatchToProps)(Frame);
export default connect(mapStateToProps)(Frame);

  